<template>
  <div class="build-library">
    <div class="dis-flex">
      <el-alert
        title="注：本网站函数库默认为创建者私有库，用户可以将自己的函数申请贡献给官方，审核通过后会收录到官方库中。"
        type="warning"
      />
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
      <el-form-item label="函数库名称" prop="libraryName">
        <el-input
          v-model="form.libraryName"
          maxlength="60"
          show-word-limit
          placeholder="请输入函数库名称"
          :disabled="type==='updateLibrary'"
        />
      </el-form-item>
      <el-form-item label="功能描述" prop="desc">
        <el-input v-model="form.desc" type="textarea" :rows="5" placeholder="请输入功能描述" />
      </el-form-item>
    </el-form>

    <div v-if="type !== 'steps'">
      <el-button
        v-if="type === 'createLibrary'"
        type="primary"
        size="mini"
        round
        @click="createLib"
      >
        提交
      </el-button>
      <el-button v-else type="primary" size="mini" round @click="updateLib">修改</el-button>
      <el-button size="mini" round @click="$router.go(-1)">取消</el-button>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';

/**
 * 新建函数库
 */
export default {
  props: {
    type: {
      type: String,
      default: 'steps'
    },
    options: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      form: {
        libraryName: '',
        desc: ''
      },
      rules: {
        libraryName: [
          { required: true, message: '函数库名不能为空！', trigger: 'blur' },
          { validator: this.validateLibraryName, trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '功能描述不能为空！', trigger: 'blur' },
          { validator: this.validateDesc, trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    ...mapState('user', ['userprefix']),
    ...mapState('functions', ['serviceName']),
    ...mapGetters('functions', ['getDisplayLibraryName'])
  },
  created() {
    this.setTitle('新建函数库');
    if (this.type === 'updateLibrary') {
      this.form.libraryName = this.getDisplayLibraryName;
      this.form.desc = this.options.desc;
    }
  },
  methods: {
    ...mapMutations('functions', ['setTitle']),
    ...mapActions('functions', ['createALiLibrary', 'updateALiLibrary']),
    get() {
      return {
        libraryName: this.userprefix + this.form.libraryName,
        desc: this.form.desc
      };
    },
    validateLibraryName(rule, value, callback) {
      if (value) {
        if (!value.trim()) {
          callback(new Error('函数库名称不能全为空格！'));
        } else if (value === 'runtime') {
          callback(new Error('函数库名称不能为runtime！'));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    validateDesc(rule, value, callback) {
      if (value && !value.trim()) {
        callback(new Error('功能描述不能全为空格！'));
      } else {
        callback();
      }
    },
    createLib() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.createALiLibrary({
            libraryName: this.userprefix + this.form.libraryName,
            desc: this.form.desc
          })
            .then(() => {
              this.$router.push({
                name: 'MyLibrary'
              });
              this.$message.success('创建成功！');
            })
            .catch((err) => {
              console.error(err);
              this.$message.error('创建失败！');
            });
        } else {
          this.$message.error('请检查输入是否正确！');
        }
      });
    },
    updateLib() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.options.desc = this.form.desc;
          this.updateALiLibrary(this.options)
            .then(() => {
              this.$router.push({
                name: 'MyLibrary'
              });
            }).catch((err) => {
              console.error(err);
            });
          this.$router.go(0);
        } else {
          this.$message.error('请检查输入是否正确！');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dis-flex {
  margin-bottom: 30px;

  label {
    width: 100px;
    line-height: 40px;
    text-align: left;
  }
}

</style>
